<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" style="margin-bottom:10px">
      <span>货品编码 &nbsp;:&nbsp;{{form.goodCode}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;货品条码 &nbsp;:&nbsp;{{form.goodsBarCode}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;货品名称 &nbsp;:&nbsp;{{form.goodsName}} </span>
    </el-form>
    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :data="tableData"
      show-footer
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-table-column field="warehouseSpaceName" title="库区"  width="120"></vxe-table-column>
      <vxe-table-column field="locationName" title="库位"  width="150"></vxe-table-column>
      <vxe-table-column field="quantity" title="库存数量"  width="120"></vxe-table-column>
      <vxe-table-column field="distributionQuantity" title="分配数量" :edit-render="{name: 'input'}"  width="120" ></vxe-table-column>
      <vxe-table-column field="gmtManufacture" title="生产日期"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsStatusName" title="库存状态"  width="120" ></vxe-table-column>
    </vxe-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit" :loading="isDisable" plain>保 存</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
import { goodsUnitConversion, receiveCheckSubmit ,receiveRegisterAdd, getReceiveRegister} from '@/api/inStorage'
// import {queryInventory, deliveryDistributionCheckSubmit} from '@/api/outStorage'
import { queryInventory, packSave } from '@/api/packManagement/prePackaged'

Vue.use(VXETable)
export default {
  props: {
    codeRef: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData:[],
      isDisable:false,
      form: {},
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      queryInventory(this.codeRef).then(response => {
        this.form = response.data
        this.tableData = response.data.inventoryWithDistributionVOList
      //   // this.tableData.forEach( i => {
      //   //   i.inventoryQuantity = i.quantity - i.useQuantity
      //   // })
      })
    },
    // 提交
    funcSubmit() {
      this.isDisable = true
      this.form.inventoryWithDistributionVOList = this.$refs.xTable.tableData
      const data = this.form
      let a = ''
      for (let i of this.form.inventoryWithDistributionVOList) {
        if(i.distributionQuantity > i.quantity || i.quantity < 0){
          this.$message.error('分配数量不可大于库存数量且不可为负')
          a =1
          break;
        }else{
          a = 0
        }
      }
      if(a == 0){
        packSave(data).then(response => {
          this.$message({ message: response.msg, type: 'success' })
          this.$emit('fatherEditMethod')
          this.isDisable = false
        }).finally(()=>{
          this.isDisable = false
        })
      } else {
        this.isDisable = false
      }
    },
  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
